<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium" style="width: 50%" align="center">
    <el-form-item label="商品图片">
    <el-upload
      ref="uploadImg"
      list-type="picture"
      :action="aaa"
      :file-list="pic_path"
      :auto-upload="false"
      :before-upload="newFiles"
      :multiple="false">
      <el-button size="small" type="primary">添加图片</el-button>
    </el-upload>
    </el-form-item>
    <el-form-item label="商品名称" prop="goods_name">
      <el-input v-model="ruleForm.goods_name" placeholder="请输入商品名称"></el-input>
    </el-form-item>
    <el-form-item label="商品品牌" prop="goods_type">
      <el-input v-model="ruleForm.goods_type" placeholder="请输入商品品牌"></el-input>
    </el-form-item>
    <el-form-item label="汽车品牌" prop="belong_car">
      <el-input v-model="ruleForm.belong_car" placeholder="请输入汽车品牌"></el-input>
    </el-form-item>
    <el-form-item label="商品价格" prop="goods_price">
      <el-input v-model="ruleForm.goods_price" placeholder="请输入商品价格"></el-input>
    </el-form-item>
    <el-form-item label="商品数量" prop="goods_num">
      <el-input v-model="ruleForm.goods_num" placeholder="请输入商品数量"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    </el-form-item>
  </el-form>
</template>
  <script type="text/ecmascript-6">
    let formData = new FormData();
    export default {
      data() {
        return {
          ruleForm: {
            goods_name: '',
            goods_type: '',
            belong_car: '',
            goods_price: '',
            goods_num: ''
          },
          rules: {
            goods_name: [
              { required: true, message: '请输入商品名称', trigger: 'change' },
            ],
            goods_type: [
              { required: true, message: '请输入商品品牌', trigger: 'change' }
            ],
            belong_car: [
              { required: true, message: '请输入汽车品牌', trigger: 'change' }
            ],
            goods_price: [
              { required: true, message: '请输入商品价格', trigger: 'change' }
            ],
            goods_num: [
              {  required: true, message: '请输入商品数量', trigger: 'change' }
            ]
          }
        };
      },
      methods: {
        newFiles (file) {
          formData.append('file', file)
          console.log(file)
          return false
        },
        submitForm (formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              console.log(this.ruleForm.pic_path)
              this.$refs.uploadImg.submit()
//              formData.append('pic_path', this.ruleForm.file);
              formData.append('belong_car', this.ruleForm.belong_car);
              formData.append('goods_name', this.ruleForm.goods_name);
              formData.append('goods_num', this.ruleForm.goods_num);
              formData.append('goods_price', this.ruleForm.goods_price);
              formData.append('goods_type', this.ruleForm.goods_type);
              let config = {
                headers: {
                  'Content-Type': 'multipart/form-data'
                }
              };
              this.$http.post('http://127.0.0.1:9100/get_goods_msg/', formData, config)
                .then((response) => {
                  if (response.status === 200) {
                    this.resetForm(formName)
                    alert("上传成功！")
                  }
                  //  跳转到登录页
//                  this.$router.push({path: '/'})
                })
            } else {
              console.log('error submit!!')
              return false
            }
        });
        },
        resetForm (formName) {
          this.$refs[formName].resetFields();
        }
      }
    }
  </script>
